Header
Package Name
fifthtry.github.io/header
This component can be used as a site header.
Header
Component Name
fifthtry.github.io/header.header
This is the main header.
toc definitions
Click To View Code
Basic usage example
-- header: site-logo: $assets.files.static.header.logo-text.png site-url: / toc-top-right: $toc-top-right toc-bottom-left: $toc-bottom-left toc-bottom-right: $toc-bottom-right menu-right: 0 menu-left: -88 toc: ftd.text: Table of Contents
Output
with design elements of light mode
-- header: background: $fpm.design.color.brand.region text-color: $fpm.design.color.brand.on-region active-text-color: $fpm.design.color.brand.on-region site-logo: $assets.files.static.header.site-logo.png site-url: / current-url: /payments/ toc-top-right: $toc-top-right toc-bottom-left: $toc-bottom-left toc-bottom-right: $toc-bottom-right logo-width: auto width: fill menu-left: -88 menu-right: 0 menu-bg: $fpm.design.color.brand.region menu-hover-bg: $fpm.design.color.brand.region menu-link: $fpm.design.color.brand.on-region menu-link-active: $fpm.design.color.brand.on-region menu-border: $fpm.design.color.brand.on-region toc: ftd.text: Table of Contents
Output
Single Row Header
-- header: site-logo: $assets.files.static.header.site-logo.png site-url: / toc-top-right: $toc-top-right current-url: / link-style: bold toc: ftd.text: Table of Contents
Output
Header with Left Menu
-- header: site-logo: $assets.files.static.header.site-logo.png site-url: / toc-bottom-left: $toc-bottom-left current-url: / link-style: bold include-dark-mode-switcher: false include-language-switcher: false toc: ftd.text: Table of Contents
Output